<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
</head>
<body>
  <!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destroy()
    * beforeDestroy()
    * destroyed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestroy(): 做收尾工作, 如: 清除定时器
-->
<div id="app">
  <button @click="destroyVM">destroy Vue</button>
  <h2 v-show="isShow">hello world</h2>
</div>
  <script src="./js/vue.js"></script>
  <script type=text/javascript>
    new Vue({
      el:'#app',
      data:{
        isShow:true
      },
      mounted() {
        this.intervalId = setInterval(() => {
          console.log('---')
          this.isShow = !this.isShow
        }, 1000);
      },
      beforeDestroy() {
        clearInterval(this.intervalId)
      },
      methods: {
        destroyVM(){
          this.$destroy()
        }
      },
    })
  </script>

</body>
</html>